﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		body{
			background:#e0e0e0;
		}
		#phone{
			margin:0 auto;
			width:303px;
			position:relative;
		}
		#content{
			width:272px;
			height:480px;
			background:black;
			position:absolute;
			top:78px;
			left:17px;
		}
		#top{
			width:270px;
			height:20px;
			-moz-user-select:none;    <!-- 让文字不会被选中 -->
			background:yellow;
		}
		#center{
			width:270px;
			height:420px;
			background:#333;
			float:left;
			overflow-y:auto;      <!--让超出的文字竖直方向溢出-->
		}
		#bottom{
			width:270px;
			height:40px;
			background:#151302;
			float:left;
		}
		#face{
			width:30px;
			height:30px;
			float:left;
			margin:5px;
			background:#151302;
			-moz-user-select:none;      <!--双击不会选中图片 -->
		}
		#face img{                <!--设置图片样式 -->
			width:30px;
			height:30px;
		}
		#text{                       <!--输入框样式 -->
			width:176px;
			height:30px;
			color:#ccc;
			margin-top:5px;
			text-indent:1em;         <!-- 文本的首行缩进 -->
			background:#514f4f;
			border:none; 
			border-radius:5px;        <!-- 设置边框圆角 -->
		}
		#send{     
			font-size:13px;
			float:right;
			width:40px;
			height:30px;
			color:white;
			background:#151302;
			text-align:center;
			cursor:pointer;          /*鼠标样式*/
			line-height:30px;
			margin:5px;
			-moz-user-select:none;       /* 不选中字体  */   
		}
		.left{
			padding-left:40px;
			background:#333 url('face1.png') no-repeat left 8px;  /*优先级问题*/
			float:left;
			clear:both;
		}
		.right{
			padding-right:40px;
			background:#333 url('face1.png') no-repeat right 8px;
			float:right;
			clear:both;
		}
	    span{
			margin-top:10px;
			display:block;
			word-wrap:break-word;      /*超出部分换行*/
			overflow:hidden;            /*超出部分隐藏*/
			max-width:180px;
			line-height:40px;
			border-radius:5px;           /*边框圆角属性*/
			color:#ccc;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var center = document.getElementById('center');
			var oSend = document.getElementById('send');
			var oFace = document.getElementById('face');
			var oImg = oFace.getElementsByTagName('img')[0];
			var oTxt = document.getElementById('text');
			var oSpan = document.getElementsByTagName('span');
			var num = 1;
			var times = 1;
			
		    oFace.onclick = function(){
				if(num < 3)
					num++;
				else
					num = 1;
				oImg.src = 'face' + num + '.png';
				times ++;
				return times;
			};
			oSend.onmousedown = function(){
				oSend.style.color = '#ccc';
			};
			oSend.onmouseup = function(){
				oSend.style.color = '#fff';
			};
			oSend.onclick = function(){
				var span = document.createElement('span');
				center.appendChild(span);
				oSpan[oSpan.length - 2].style.backgroundImage = "url('" + oImg.src + "')";
				oSpan[oSpan.length - 2].innerHTML = oTxt.value;
				oTxt.value = '';
				
			};
			
		};
	</script>
</head>
<body>
	<div id="phone">
		<img src="iphone.jpg">
		<div id="content">
			<div id="top"><img src="top.jpg"></div>
			<div id="center">
				<span class="left"></span>
			</div>
			<div id="bottom">
				<div id="face"><img src="face1.png"></div>
				<input type="text" id="text" value=''>
				<div id="send">发送</div>
			</div>
		</div>
	</div>
</body>
</html>